<!--
 * @Author: wupeiwen <javapeiwen2010@gmail.com>
 * @Date: 2023-06-12 16:46:30
 * @LastEditors: wupeiwen <javapeiwen2010@gmail.com>
 * @LastEditTime: 2023-06-12 17:19:43
 * @FilePath: /tea-garden-web/src/pages/manager-equipment.vue
 * @Description: 管理-设备
-->
<template>
  <div class="manager-equipment">
    <div class="top-area">
      <i class="icon-button-back" @click="$router.push({ name: 'baseOverview' })" />
      <span class="page-name">设备管理</span>
    </div>
    <div class="content-area">
      <el-skeleton :loading="loading.allEquipment" animated>
        <template #template>
          <el-row class="table-header">
            <el-col :span="8">设备ID</el-col>
            <el-col :span="8">设备名称</el-col>
            <el-col :span="8">设备状态</el-col>
          </el-row>
          <el-skeleton-item class="table-row" variant="text" v-for="index in 8" :key="index"></el-skeleton-item>
        </template>
        <template #default v-if="allEquipment.length === 0">
          <section style="width: 100%; margin-top: 40px; text-align: center; color: #333333;">暂无地块信息</section>
        </template>
        <template #default v-else-if="allEquipment.length  > 0">
          <el-row class="table-header" >
            <el-col :span="2">设备ID</el-col>
            <el-col :span="5">设备名称</el-col>
            <el-col :span="3">设备图片</el-col>
            <el-col :span="2">设备状态</el-col>
            <el-col :span="2">运行状态</el-col>
            <el-col :span="7">运行时长</el-col>
            <el-col :span="3">设备详情</el-col>

          </el-row>
          <el-row class="table-row" v-for="item in listData" :key="item.id">
            <el-col class="row-name" :span="2">{{item.id}}</el-col>
            <el-col class="row-name" :span="5">{{item.name}}</el-col>
            <el-col class="row-name" :span="3">
              <img :src="item.img" alt="">
            </el-col>
            <el-col class="row-name" :span="2">{{item.state1}}</el-col>
            <el-col class="row-name" :span="2">{{item.state2}}</el-col>
            <el-col class="row-name" :span="7">{{stateTime (item.id)}}</el-col>
            <el-col class="row-name btnBox" :span="3"><div class="btn" @click="filterById (item.id)">查看详情</div></el-col>
          </el-row>
        </template>
      </el-skeleton>
    </div>
 <div v-show="dialogState" class="modal1">
      <div class="modal-content1">
        <span class="close1" @click="closeDialog">&times;</span>
        <h3>{{resDetail.name}}</h3>
        <p>设备简介：</p>
        <p>{{resDetail.detali}}</p>
        <div v-if="resDetail.id==7" >
         <div class="btn1" @click="openLink()" >打开控制平台</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import img1 from '../assets/image/图片1.png'
import img2 from '../assets/image/2土壤(1).jpg'
import img3 from '../assets/image/3球机.jpg'
import img4 from '../assets/image/4球.jpg'
import img5 from '../assets/image/5球.jpg'
import img6 from '../assets/image/6虫情测报.jpg'
import img7 from '../assets/image/7水肥.jpg'
import img8 from '../assets/image/8气象.jpg'

export default {
  data () {
    return {
      listData: [
        { id: 1, name: '茶树地基生长监测传感器', img: img1, state1: '在线', state2: '运行中', time: '' },
        { id: 2, name: '土壤状态无线监测系统', img: img2, state1: '在线', state2: '运行中', time: '1小时' },
        { id: 3, name: '视频监控设备1', img: img3, state1: '在线', state2: '运行中', time: '1小时' },
        { id: 4, name: '视频监控设备2', img: img4, state1: '在线', state2: '运行中', time: '1小时' },
        { id: 5, name: '视频监控设备3', img: img5, state1: '在线', state2: '运行中', time: '1小时' },
        { id: 6, name: '虫情智能检测仪', img: img6, state1: '离线', state2: '------ ', time: '1小时' },
        { id: 7, name: '水肥一体机', img: img7, state1: '在线', state2: '未运行', time: '1小时' },
        { id: 8, name: '气象监测设备 ', img: img8, state1: '在线', state2: '运行中', time: '1小时' }
      ],
      currentTime: '',
      DataDetail: [
        {
          id: 1,
          name: '茶树地基生长监测传感器',
          detali: '茶树地基生长监测传感器通过RGB相机获取高清作物冠层影像，结合计算机视觉技术，实现叶面积、冠层覆盖度、芽叶数量、生育期等信息的提取。'
        },
        { id: 2, name: '土壤状态无线监测系统', detali: '实时监测土壤温度、湿度、电导率、氮、磷、钾等土壤墒情数据。' },
        { id: 3, name: '视频监控设备1', detali: '茶叶山监控' },
        { id: 4, name: '视频监控设备2', detali: '茶叶山球机监控' },
        { id: 5, name: '视频监控设备3', detali: '茶叶山后山监控' },
        { id: 6, name: '虫情智能检测仪', detali: '' },
        { id: 7, name: '水肥一体机', detali: '物联网控制实现茶园自动灌溉' },
        { id: 8, name: '气象监测设备', detali: '实时监测温度、湿度、风向、风速、降水量等茶园气象数据。' }
      ],
      resDetail: '',
      dialogState: false
    }
  },
  computed: {
    ...mapState('base-overview', ['loading', 'allEquipment']),
    ...mapGetters('common', ['getDictItemNameById'])

  },
  methods: {
    ...mapActions('base-overview', ['getAllEquipment']),
    getCurrentTime () {
      const now = new Date()
      const hours = this.formatUnit(now.getHours())
      const minutes = this.formatUnit(now.getMinutes())
      const seconds = this.formatUnit(now.getSeconds())
      this.currentTime = `1天${hours - 5}小时${minutes}分${seconds}秒`
    },
    formatUnit (unit) {
      return unit < 10 ? '0' + unit : unit
    },
    stateTime (id) {
      if (id === 6) {
        return '最后上线时间：2023年6月'
      } else if (id === 7) {
        return '最后开启时间：2023年12月1日'
      } else {
        return this.currentTime
      }
    },
    filterById (id) {
      const res = this.DataDetail.filter(item => item.id === id)
      // console.log(JSON.parse(JSON.stringify(res[0])))
      this.resDetail = JSON.parse(JSON.stringify(res[0]))
      // return JSON.parse(JSON.stringify(res[0]))
      this.showDialog()
    },
    showDialog () {
      this.dialogState = true
      console.log(this.dialogState)
    },
    closeDialog () {
      this.dialogState = false
    },
    openLink () {
      window.open('https://cloud.haiwell.com/#/login?language=cn')
    }

  },
  mounted () {
    this.getCurrentTime()
    setInterval(() => {
      this.getCurrentTime()
    }, 1000)
  },

  created () {
    this.getAllEquipment()
  }
}
</script>

<style lang="scss">
.manager-equipment {
  height: 100%;
  background: #eff7f8;
  position: relative;

  .top-area {
    position: relative;

    .icon-button-back {
      cursor: pointer;
      width: 18px;
      height: 18px;
      background-image: url("/public/image/common/icon-button-back-03.png");
      background-size: cover;
      position: absolute;
      left: 27px;
      top: 30.5px;
    }

    .page-name {
      font-size: 18px;
      font-family: PingFang SC-Heavy, PingFang SC;
      font-weight: 800;
      color: #089bab;
      height: 25px;
      width: 100px;
      text-align: center;
      position: absolute;
      left: 52px;
      top: 27px;
    }
  }

  .content-area {
    width: calc(100% - 20px);
    height: 620px;
    background: #ffffff;
    box-shadow: 0px 5px 10px 1px rgba(120, 146, 141, 0.12);
    border-radius: 15px;
    position: absolute;
    left: 10px;
    bottom: 20px;
    padding: 16px;
    overflow-y: auto;

    .table-header {
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 33px;
      text-align: center;
    }

    .table-row {
      line-height: 53.5px;
      border-bottom: 1px solid #f1f2f4;
      position: relative;
      text-align: center;
      .btnBox {
       text-align: center;

      }
      .row-name {
        font-size: 16px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #089bab;
        display: inline-block;
        text-align: center;
        img {
          width: 48px;
          height: 48px;
        }
        .btn {
          cursor: pointer;
          background-color: #f0f9eb;
          width: 60%;
          height: 40px;
          line-height: 40px;
          margin-top: 6px;
          margin-left: 32px;
          border-radius: 20px;
        }
        .btn:hover {
          background-color: #089bab;
          color: #fff;
          transition: 0.5s;
        }
      }
    }
  }
}
// 弹窗样式
.modal1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content1 {
  position: relative;
  margin: 15% auto;
  padding: 20px;
  width: 400px;
  background-color: #fff;
  text-align: center;
  border-radius: 15px;
  H3 {
    color: #089bab;
  }
  p{
    color: #1aa0af;
    text-align: left;
    line-height: 30px;
  }
}

.close1 {
  position: absolute;
  top: 0;
  right: 10px;
  font-size: 28px;
  color: #aaa;
  cursor: pointer;
}
.btn1 {
     cursor: pointer;
     background-color: #f0f9eb;
     width: 120px;
     height: 40px;
     line-height: 40px;
    margin: 0 auto;
     border-radius: 20px;
     }
        .btn1:hover {
          background-color: #089bab;
          color: #fff;
          transition: 0.5s;
        }
</style>
